<template>
	<div class="home w944">
		<div class="label_top">
			<p><i class="line"></i>数据统计</p>
			<!--<a href=""></a>-->
		</div>
		<div class="ruzhu">
			<ul>
				<li class="rowLi01" style="margin-left: 0;">
					<p>新入驻企业</p>
					<h3>{{newEnterprise}}</h3>
				</li>
				<li class="rowLi02">
					<p>昨日新增学员</p>
					<h3>{{yesterdayAddCourse}}</h3>
				</li>
				<li class="rowLi03">
					<p>昨日新增课程</p>
					<h3>{{yesterdayAddLearned}}</h3>
				</li>
				<li class="rowLi04">
					<p>昨日总访问人数</p>
					<h3>{{yesterdayVisitNumber}}</h3>
				</li>
			</ul>
		</div>
		<div class="fangwen clearfix">
			<div class="fangwenleft clearfix">
				<h3>客户转化分析</h3>
				<div class="fwDetail clearfix">
					<p class="p1">学员访问量</p>
					<p class="p2">视频访问量</p>
					<ul>
						<li>
							<div class="l">
								<div class="t">{{userYesCnt}}</div>
								<div class="b">昨日</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="courseYesCnt"></el-progress>
							</div>
						</li>
						<li>
							<div class="l">
								<div class="t">{{userBefYesCnt}}</div>
								<div class="b">前日</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="courseBefYesCnt"></el-progress>
							</div>
						</li>
						<li>
							<div class="l">
								<div class="t">{{userBefWeekCnt}}</div>
								<div class="b">一周前</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="courseBefWeekCnt"></el-progress>
							</div>
						</li>
					</ul>
				</div>
				<div class="fwDetail clearfix" style="float: right;">
					<p class="p1">企业访问量</p>
					<p class="p2">购买转化率</p>
					<ul>
						<li>
							<div class="l">
								<div class="t">{{companyYesCnt}}</div>
								<div class="b">昨日</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="buyCourseYesCnt"></el-progress>
							</div>
						</li>
						<li>
							<div class="l">
								<div class="t">{{companyBefYesCnt}}</div>
								<div class="b">前日</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="buyCourseBefYesCnt"></el-progress>
							</div>
						</li>
						<li>
							<div class="l">
								<div class="t">{{companyBefWeekCnt}}</div>
								<div class="b">一周前</div>
							</div>
							<div class="r">
								<el-progress type="circle" :percentage="buyCourseBefWeekCnt"></el-progress>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="fangwenright">
				<h3>企业细分分析</h3>
				<div id="mainqiye" style="width: 210px;height: 210px;margin: 0 auto;position: relative;top: -32px;"></div>
				<ul style="width: 295px;margin: -35px auto 0;">
					<li>
						<span style="background: #3aa0ff"></span>
						<p>企业会员</p>
						<i>{{examineCompanyCnt}}</i>
						<em>{{examinePercent}}%</em>
					</li>
					<li>
						<span style="background: #44cef6"></span>
						<p>企业试用</p>
						<i>{{trialCompanyCnt}}</i>
						<em>{{trialPercent}}%</em>
					</li>
					<li>
						<span style="background: #36cbcb"></span>
						<p>流失企业</p>
						<i>{{longNotLoginCompanyCnt}}</i>
						<em>{{longNotPercent}}%</em>
					</li>
				</ul>
			</div>
		</div>
		<div class="kecheng clearfix">
			<div class="bofang">
				<h3>课程播放热度</h3>
				<el-table :data="tableData" style="width: 97%;height: 233px;">
					<el-table-column prop="courseName" label="课程" width="300"></el-table-column>
					<el-table-column prop="clickCount" label="播放数量"></el-table-column>
					<el-table-column label="占比总播放量" width="160">
						<template slot-scope="scope">
							<el-progress type="line" :percentage="scope.row.percentCnt"></el-progress>
						</template>
					</el-table-column>
					<el-table-column prop="columnName" label="" class="column"></el-table-column>
				</el-table>
				<div class="pag_block" style="margin-top: 10px;">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<div class="xueyuanxi">
				<h3>学员细分分析</h3>
				<div id="main" style="width: 210px;height: 210px;margin: 0 auto;position: relative;top: -32px;"></div>
				<ul style="width: 295px;margin: -35px auto 0;">
					<li>
						<span style="background: #FED406;"></span>
						<p>活跃学员</p>
						<i>{{oftenLoginUserCnt}}</i>
						<em>{{oftenPercent}}%</em>
					</li>
					<li>
						<span style="background: #E6E6E6;"></span>
						<p>沉睡学员</p>
						<i>{{longNotLoginUserCnt}}</i>
						<em>{{longPercent}}%</em>
					</li>
				</ul> 
			</div>
		</div>
	
	</div>
</template>
<script>
	import echarts from 'echarts'
	export default {
		data() {
			return {
				tableData:[],
				//分页设置
		        pagesize: 5,
		        currentpage: 1,
		        total: 1,
				//分页设置end
				//首行统计start
				newEnterprise:'',
				yesterdayAddCourse:'',
				yesterdayAddLearned:'',
				yesterdayVisitNumber:'',
				//首行统计end
				//客户转化分析start
		        userYesCnt:'',
		        userBefYesCnt:'',
		        userBefWeekCnt:'',
		        companyYesCnt:'',
		        companyBefYesCnt:'',
		        companyBefWeekCnt:'',
				
				courseYesCnt:0,
		        courseBefYesCnt:0,
		        courseBefWeekCnt:0,
		        buyCourseYesCnt:0,
				buyCourseBefYesCnt:0,
				buyCourseBefWeekCnt:0,
		        //客户转化分析end
		        //企业细分start
				examineCompanyCnt:'',
				examinePercent:'',
				trialCompanyCnt:'',
				trialPercent:'',
				longNotLoginCompanyCnt:'',
				longNotPercent:'',
				anoCharts: '',
                anoOpinion:['企业会员','企业试用','流失企业'],
                anoOpinionData:[
                  {value:335, name:'企业会员'},
                  {value:335, name:'企业试用'},
                  {value:310, name:'流失企业'},
                ],
                //学员细分end
				//学员细分start
				oftenLoginUserCnt:'',
				oftenPercent:'',
				longNotLoginUserCnt:'',
				longPercent:'',
				charts: '',
                opinion:['活跃学员','沉睡学员'],
                opinionData:[
                  {value:335, name:'活跃学员'},
                  {value:310, name:'沉睡学员'},
                ]
                //学员细分end
			}
		},
		methods: {
			getTongJiList(){
				// 首页统计
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/dataStatistics/firstColumn",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'GET',
					data: {},
					success: res => {
						//console.log('首页统计',res);
						if(res.data.code == 200) {
							var s = res.data.data;
			 				this.newEnterprise = s.newEnterprise;
							this.yesterdayAddCourse = s.yesterdayAddCourse;
							this.yesterdayAddLearned = s.yesterdayAddLearned;
							this.yesterdayVisitNumber = s.yesterdayVisitNumber;
						}
					}
				});
			},
			getKehuList(){
				// 客户转化分析
				this.$ajax({
					url: this.$root.jifuUrl + "/userTransform",
					method: 'GET',
					data: {},
					success: res => {
						//console.log('客户转化分析',res);
						if(res.data.code == 200) {
							var s = res.data.data;
			 				this.userYesCnt = s.userYesCnt;
							this.userBefYesCnt = s.userBefYesCnt;
							this.courseBefWeekCnt = s.courseBefWeekCnt;
							this.companyYesCnt = s.companyYesCnt;
							this.buyCourseBefYesCnt = s.buyCourseBefYesCnt;
							this.courseBefYesCnt = s.courseBefYesCnt;
							this.companyBefWeekCnt = s.companyBefWeekCnt;
							this.courseYesCnt = s.courseYesCnt;
							this.userBefWeekCnt = s.userBefWeekCnt;
							this.companyBefYesCnt = s.companyBefYesCnt;
							this.buyCourseBefWeekCnt = s.buyCourseBefWeekCnt;
							this.buyCourseYesCnt = s.buyCourseYesCnt;
						}
					}
				});
			},
			getreduList(){
				// 课程播放热度
				this.$ajax({
					url: this.$root.jifuUrl + "/coursePlaybackHeat?" + 'page=' + this.currentpage + '&num=' + this.pagesize,
					method: 'GET',
					data: {},
					success: res => {
						//console.log('课程播放热度',res);
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			// 企业细分分析
			getQiYeEmphasis(){
				let that=this;
				this.$ajax({
					url: this.$root.jifuUrl + "/companyAnalysis",
					method: 'GET',
					data: {},
					success: res => {
						// console.log('企业细分分析',res);
						if(res.data.code == 200) {
							that.anoOpinionData[0].value = res.data.data.examineCompanyCnt;
							that.anoOpinionData[1].value = res.data.data.trialCompanyCnt;
							that.anoOpinionData[2].value = res.data.data.longNotLoginCompanyCnt;
							that.drawPieqiye();
							that.examineCompanyCnt = res.data.data.examineCompanyCnt;
							that.trialCompanyCnt = res.data.data.trialCompanyCnt;
							that.longNotLoginCompanyCnt = res.data.data.longNotLoginCompanyCnt;
//							console.log('#######',that.examineCompanyCnt,that.trialCompanyCnt,that.longNotLoginCompanyCnt);
							if(that.examineCompanyCnt==0){
								that.examinePercent = 0;
							}else{
								let qiyePoint = [that.examineCompanyCnt/(that.examineCompanyCnt + that.trialCompanyCnt + that.longNotLoginCompanyCnt)]*100;
								that.examinePercent = parseInt(qiyePoint);
							};
							
							if(that.trialCompanyCnt==0){
								that.trialPercent = 0;
							}else{
								let qiyePoint1 = [that.trialCompanyCnt/(that.examineCompanyCnt + that.trialCompanyCnt + that.longNotLoginCompanyCnt)]*100;
								that.trialPercent = parseInt(qiyePoint1);
							};
							
							if(that.longNotLoginCompanyCnt==0){
								that.longNotPercent = 0;
							}else{
								let qiyePoint2 = [that.longNotLoginCompanyCnt/(that.examineCompanyCnt + that.trialCompanyCnt + that.longNotLoginCompanyCnt)]*100;
								that.longNotPercent = parseInt(qiyePoint2);
							};
						}
					}
				});
			},
			// 学员细分分析
			getXueEmphasis(){
				let that=this;
				this.$ajax({
					url: this.$root.jifuUrl + "/userAnalysis",
					method: 'GET',
					data: {},
					success: res => {
						//console.log('学员细分分析',res);
						if(res.data.code == 200){
							that.opinionData[0].value = res.data.data.oftenLoginUserCnt;
							that.opinionData[1].value = res.data.data.longNotLoginUserCnt;
							that.drawPie();
							that.oftenLoginUserCnt = res.data.data.oftenLoginUserCnt;
							that.longNotLoginUserCnt = res.data.data.longNotLoginUserCnt;
							
							if(that.oftenLoginUserCnt==0){
								that.oftenPercent = 0;
							}else{
								let point = [that.oftenLoginUserCnt/(that.oftenLoginUserCnt + that.longNotLoginUserCnt)]*100;
								that.oftenPercent = parseInt(point);
							};
							
							if(that.longNotLoginUserCnt==0){
								that.longPercent = 0;
							}else{
								let point1 = [that.longNotLoginUserCnt/(that.oftenLoginUserCnt + that.longNotLoginUserCnt)]*100;
								that.longPercent = parseInt(point1);
							};
						}
					}
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getreduList();
			},
            drawPieqiye(){
            	this.anoCharts = echarts.init(document.getElementById('mainqiye'))
                this.anoCharts.setOption({
                 tooltip: {
                   trigger: 'item'
                 },
                 series: [
                    {
                     	type:'pie',
                     	animation: false,
						radius : ['70%','45%'],
						hoverAnimation : false,
						color:['#3aa0ff','#44cef6','#36cbcb'], 
                     	avoidLabelOverlap: false,
                     	label: {
                       		normal: {
                        		show: false,
                         		position: 'center'
                       		},
                       		emphasis: {
                         		show: true,
                         		textStyle: {
                           			color:'#333',
                           			fontSize : '14',
                         		}
                       		}
                     	},
                     	data:this.anoOpinionData
                   	}
                ]
              })
            },
			drawPie(){
				this.charts = echarts.init(document.getElementById('main'))
               this.charts.setOption({
                 tooltip: {
                   trigger: 'item',
                  
                 },
                 color:['#FED406','#ccc'], 
                 series: [
                   {
                     type:'pie',
                     animation: false,
						radius : ['70%','45%'],
						hoverAnimation : false,
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           color:'#333',
                           fontSize : '14',
                         }
                       }
                     },
                     data:this.opinionData
                   }
                 ]
              })
            }
		},
		mounted: function() {
			this.getTongJiList();
		    this.getKehuList();
			this.getreduList();
			this.getQiYeEmphasis();
			this.getXueEmphasis();
			this.$nextTick(function() {
                this.drawPieqiye()
            });
			this.$nextTick(function() {
                this.drawPie()
            })
		}
	}
</script>
<style>
	.home{padding-bottom:100px;}
	.home .ruzhu {width:100%;height:100px;margin:30px 0;}
	.home .ruzhu li {width:23.5%;height:100px;float:left;margin-left:2%;}
	.home .ruzhu li p {font-size:16px;color:#fff;text-align:center;padding:17px 0 7px;}
	.home .ruzhu li h3 {font-size:30px;color:#fff;text-align:center;}
	.home .pages1 {background:#6CADFB;}
	.home .pages2 {background:#FED406;}
	.home .pages3 {background:#44CEF6;}
	.home .pages4 {background:#FB6260;}
	.home .fangwen {width:100%;height:345px;}
	.home .fangwenleft {width:66%;height:346px;border:1px solid #ccc;float:left;}
	.home .fangwenleft h3 {font-size:14px;color:#000;margin:16px 0 0 17px;font-weight:normal;}
	.home .fwDetail {width:39%;margin:18px 20px 0 20px;float:left;}
	.home .fwDetail .p1,.home .fwDetail .p2 {font-size:12px;color:#999;text-align:left;display:inline-block;width:48%;margin-bottom:20px;}
	.home .fwDetail .p2 {text-align:right;}
	.home .fwDetail li {height:68px;margin-bottom:16px;}
	.home .fwDetail li .l {width:73px;float:left;}
	.home .fwDetail li .r {width:68px;float:right;}
	.home .fwDetail li .t {font-size:30px;color:#999;font-weight:bold;}
	.home .fwDetail li .b {font-size:12px;color:#999;margin-top:10px;}
	.home .fwDetail li .r .el-progress-circle {width:68px!important;height:68px!important;}
	.home .fangwenright {width:32%;height:346px;border:1px solid #ccc;float:right;}
	.home .fangwenright h3 {color:#000;font-size:14px;margin:16px 0 16px 18px;}
	.home .fangwenright img {width:150px;height:150px;display:block;margin:0 auto 25px;}
	.home .fangwenright li {height:25px;margin:0 0 15px 32px;line-height:23px;}
	.home .fangwenright li span {width:50px;height:25px;display:inline-block;float:left;}
	.home .qiyexifenpage1 {background:#3AA0FF;}
	.home .qiyexifenpage2 {background:#44CEF6;}
	.home .qiyexifenpage3 {background:#36CBCB;}
	.home .fangwenright li p {color:#999;font-size:12px;display:inline-block;margin-left:7px;}
	.home .fangwenright li i {color:#333;font-size:12px;display:inline-block;font-style:normal;width:75px;text-align:center;}
	.home .fangwenright li em {color:#999;font-size:12px;display:inline-block;font-style:normal;width:35px;text-align:center;}
	.home .el-progress-bar__inner {background:#44CEF6;}
	.home .kecheng {width:100%;height:310px;margin-top:30px;}
	.home .bofang {width:64%;height:310px;border:1px solid #ccc;float:left;padding-left: 2%;}
	.home .bofang h3 {color:#000;font-size:14px;margin:15px 0 0 10px;}
	.home .bofang .el-table {height:204px;overflow:hidden;}
	.home .bofang .el-table td{padding: 5px 0;}
	.home .bofang .el-table__row td{height: 37px;line-height: 37px;}
	.home .el-table--enable-row-transition .el-table__body td {text-align:center;}
	.home .el-table__row .el-table_1_column_4 .cell {text-align:center;width:50px;height:17px;line-height:17px;background:#44CEF6;font-size:12px;color:#fff;}
	.home .xueyuanxi {width:32%;height:310px;border:1px solid #ccc;float:right;}
	.home .xueyuanxi h3 {color:#000;font-size:14px;margin:16px 0 16px 18px;}
	.home .xueyuanxi img {width:150px;height:150px;display:block;margin:0 auto 25px;}
	.home .xueyuanxi li {height:25px;margin:0 0 15px 32px;line-height:23px;}
	.home .xueyuanxi li span {width:50px;height:25px;display:inline-block;float:left;}
	.home .xueyuanxifenpage1 {background:#FED406;}
	.home .xueyuanxifenpage2 {background:#E6E6E6;}
	.home .xueyuanxi li p {color:#999;font-size:12px;display:inline-block;margin-left:7px;}
	.home .xueyuanxi li i {color:#333;font-size:12px;display:inline-block;font-style:normal;width:75px;text-align:center;}
	.home .xueyuanxi li em {color:#999;font-size:12px;display:inline-block;font-style:normal;width:35px;text-align:center;}
	.home .rowLi01{background: #6CADFB;}
	.home .rowLi02{background: #FED406;}
	.home .rowLi03{background: #44CEF6;}
	.home .rowLi04{background: #FB6260;}
</style>